<script setup lang="ts" name="home">
import {onMounted, reactive, ref} from "vue";
import {ElMessage} from 'element-plus';
import commonFunction from '/@/utils/commonFunction';
import {useSquareApi} from "/@/api/square";

import MainColumns from "/@/components/common/main-columns.vue";
import MainHeader from "/@/components/common/main-header.vue";

const onlineActive = ref(1); // 默认平台激活
const navActive = ref(0); // 导航激活

const introduceShow = ref(false); // 产品介绍展示
const popularizeShow = ref(false); // 我要推广展示
const lxsAppData = reactive({
	tab: {
		secondName: ref(''),
		thirdName: ref(''),
	},
	onlinePlatform: [],
	classData: [],
	data: [],
	productInfo: {},
	popularizePlatformData: {},
})

// 获取列表数据
const getSquareListData = async (class_id, online_platform) => {
	const { data } = await useSquareApi().getSquareListData({type: class_id, online_platform: online_platform});
	if (!data.online_platform_data || !data.class_list || !data.lists) {
		ElMessage.error('获取数据失败');
	}
	lxsAppData.onlinePlatform = data.online_platform_data;
	lxsAppData.classData = data.class_list;
	lxsAppData.data = data.lists;
	lxsAppData.tab.secondName = lxsAppData.onlinePlatform[onlineActive.value];
	lxsAppData.tab.thirdName = lxsAppData.classData[navActive.value]?.class_name;
}

// 左侧平台点击
const onlinePlatformClick = (index) => {
	if (onlineActive.value === index) {
		return
	}
	lxsAppData.tab.secondName = lxsAppData.onlinePlatform[index];

	onlineActive.value = index;
	navActive.value = 0
	getSquareListData(navActive.value, index);

}

// 导航点击
const navClick = (index) => {
	if (navActive.value === index) {
		return
	}
	navActive.value = index;

	let class_id = lxsAppData.classData[navActive.value].id
	getSquareListData(class_id, onlineActive.value)

}

// 产品介绍点击
const introduceClick = async (id) => {
	introduceShow.value = true;
	lxsAppData.productInfo.product_cover = lxsAppData.data.find(item => item.id === id).product_cover;
	lxsAppData.productInfo.product_title = lxsAppData.data.find(item => item.id === id).product_title;
	lxsAppData.productInfo.platform_data = lxsAppData.data.find(item => item.id === id).platform_data;
	lxsAppData.productInfo.live_time = lxsAppData.data.find(item => item.id === id).live_time;
	lxsAppData.productInfo.product_intro = lxsAppData.data.find(item => item.id === id).product_intro;
}

// 我要推广点击
const popularizeClick = async (id) => {
	popularizeShow.value = true;
	const { data } = await useSquareApi().getSquareIntroduceData({product_id: id, popularize_id: 0});
	if (!data.product || !data.popularize_platform_data) {
		ElMessage.error('获取数据失败');
	}
	lxsAppData.productInfo = data.product;
	lxsAppData.popularizePlatformData = data.popularize_platform_data;
	console.log('我要推广点击', lxsAppData.productInfo)
}
// 我要推广导航点击
const popularizeNavClick = async (product_id, popularize_id) => {
	const { data } = await useSquareApi().getSquareIntroduceData({product_id: product_id, popularize_id: popularize_id});
	lxsAppData.productInfo = data.product;
	lxsAppData.popularizePlatformData = data.popularize_platform_data;
}

// 复制
const copyClick = (value) => {
	commonFunction().copyText(value);
}

// 保存二维码
const saveQrcodeClick = async (value) => {
	let time = timeFormat();
	let a = document.createElement('a');      // 创建一个a节点插入的document
	let event = new MouseEvent('click');          // 模拟鼠标click点击事件
	a.download = "img_"+time+'.jpg';                  // 设置a节点的download属性值
	a.href = value;                                     // 将图片的src赋值给a节点的href
	a.dispatchEvent(event)
	a.remove(); // 下载之后把创建的元素删除
	ElMessage.success('保存成功');
}
const add0 = (m) => {
	return m<10?'0'+m:m
}
//格式化时间
const timeFormat = ()=>{
	let time = new Date();
	let y = time.getFullYear();
	let m = time.getMonth()+1;
	let d = time.getDate();
	let h = time.getHours();
	let mm = time.getMinutes();
	let s = time.getSeconds();
	return y + add0(m) + add0(d) + add0(h) + add0(mm) + add0(s);
}

onMounted(() => {
	getSquareListData(0, 1);
});
</script>

<template>
	<div class="layout-container flex">

		<MainColumns :active="onlineActive" :items="lxsAppData.onlinePlatform" @click="onlinePlatformClick" />

		<div class="flex-column w100">

			<MainHeader
				second-url="/"
				:second-name="lxsAppData.tab.secondName"
				third-url="/"
				:third-name="lxsAppData.tab.thirdName"
			/>

			<div class="main-content">

				<el-card shadow="hover" class="layout-padding-auto">

					<div class="nav-box">
						<div v-for="(item, index) in lxsAppData.classData" :class="{'nav-active': navActive === index}" @click="navClick(index)">
							<span>{{ item.class_name }}</span>
						</div>
					</div>

					<div class="content-box">

						<div class="content-simple">

							<template v-if="lxsAppData.data.length > 0">
								<div class="simple-item" v-for="(item, index) in lxsAppData.data" :key="index" >
									<div class="simple-item-top">
										<div class="simple-item-top-img">
											<img :src="item.product_cover" alt="">
										</div>
										<div class="simple-item-content">
											<div class="simple-item-top-title">{{ item.product_title }}</div>
											<div class="simple-item-top-icon">
												<span>可推广平台：</span>
												<img v-for="(items, index) in item.popularize_data" :key="index" :src="items.popularize_cover" alt="">
											</div>
											<div class="simple-item-top-time">
												<span>上线时间：{{ item.live_time }}</span>
											</div>
										</div>
									</div>
									<div class="simple-item-middle">
										<div class="flex-column flex-center">
											<span class="text-box-text1">佣金比率</span>
											<span class="text-box-text2">成单金额{{ item.commission_ratio * 100 }}%</span>
										</div>
										<div class="flex-column flex-center">
											<span class="text-box-text1">订单数据</span>
											<span class="text-box-text2">实时</span>
										</div>
										<div class="flex-column flex-center">
											<span class="text-box-text1">结算时间</span>
											<span class="text-box-text2">月结</span>
										</div>
									</div>
									<div class="simple-item-bottom">
										<div class="simple-item-bottom-1" @click="introduceClick(item.id)">产品介绍</div>
										<div class="simple-item-bottom-2" @click="popularizeClick(item.id)">我要推广</div>
									</div>
								</div>
							</template>

							<template v-else>
								<view class="no-data" style="margin-top: 100rpx;">
									<img src="https://ouan-retail.oss-cn-shenzhen.aliyuncs.com/web/icon/%E6%9A%82%E6%97%A0%E8%AE%B0%E5%BD%95.png"  alt=""/>
									<text>暂无数据</text>
								</view>
							</template>

						</div>

					</div>

				</el-card>

			</div>

		</div>

	</div>

	<!--  产品介绍-start	-->
	<el-drawer
		v-model="introduceShow"
		title="产品介绍"
		direction="rtl"
		size="420"
	>
		<div class="simple-item-top product-box">
			<div class="simple-item-top-img">
				<img :src="lxsAppData.productInfo.product_cover" alt="">
			</div>
			<div class="simple-item-content ml10">
				<div class="simple-item-top-title">{{ lxsAppData.productInfo.product_title }}</div>
				<div class="simple-item-top-icon">
					<span>可推广平台：</span>
					<img v-for="items in lxsAppData.productInfo.popularize_data" :src="items.platform_cover" alt="">
				</div>
				<div class="simple-item-top-time">
					<span>上线时间：{{ lxsAppData.productInfo.live_time }}</span>
				</div>
			</div>
		</div>
		<div class="pt-title flex-items-center">
			<img class="pt-title-icon" src="https://ouan-retail.oss-cn-shenzhen.aliyuncs.com/xcx/tab/title%E5%B7%A6%E8%BE%B9.png" />
			<span class="ml5">推广产品</span>
		</div>
		<div class="pt-content">
			<p>{{ lxsAppData.productInfo.product_intro }}</p>
		</div>
	</el-drawer>
	<!--  产品介绍-end	-->

	<!--  我要推广-start	-->
	<el-drawer
		v-model="popularizeShow"
		direction="rtl"
		size="500"
	>
		<template #header>
			<div class="popularize-nav">
				<div v-for="item in lxsAppData.popularizePlatformData" :class="{'nav-active': lxsAppData.productInfo.productSon.popularize_id == item.id}" @click="popularizeNavClick(lxsAppData.productInfo.id, item.id)">
					<span>{{ item.popularize_name }}</span>
				</div>
			</div>
		</template>
		<div class="popularize-content">
			<div class="popularize-item">
				<div class="popularize-item-left">
					<text>appid:</text>
				</div>
				<div class="popularize-item-middle">
					<div class="popularize-item-middle-box">
						<text>{{ lxsAppData.productInfo.productSon?.appid }}</text>
					</div>
				</div>
				<div class="popularize-item-right">
					<span @click="copyClick(lxsAppData.productInfo.productSon?.appid)">复制链接</span>
				</div>
			</div>
			<div class="popularize-item">
				<div class="popularize-item-left">
					<text>path:</text>
				</div>
				<div class="popularize-item-middle">
					<div class="popularize-item-middle-box">
						<text>{{ lxsAppData.productInfo.productSon?.path }}</text>
					</div>
				</div>
				<div class="popularize-item-right">
					<span @click="copyClick(lxsAppData.productInfo.productSon?.path)">复制链接</span>
				</div>
			</div>
			<div class="popularize-item">
				<div class="popularize-item-left">
					<text>直播间挂载链接:</text>
				</div>
				<div class="popularize-item-middle">
					<div class="popularize-item-middle-box">
						<text>{{ lxsAppData.productInfo.productSon?.platform_link }}</text>
					</div>
				</div>
				<div class="popularize-item-right">
					<span @click="copyClick(lxsAppData.productInfo.productSon?.platform_link)">复制链接</span>
				</div>
			</div>
			<div class="popularize-item" v-if="lxsAppData.productInfo.popularize_qrcode">
				<div class="popularize-item-left">
					<text>分享二维码:</text>
				</div>
				<div class="popularize-item-middle">
					<div class="popularize-item-qrcode">
						<img :src="lxsAppData.productInfo.popularize_qrcode" alt="">
						<span @click="saveQrcodeClick(lxsAppData.productInfo.popularize_qrcode)">保存二维码</span>
					</div>
				</div>
				<div class="popularize-item-right">

				</div>
			</div>
		</div>
	</el-drawer>
	<!--  我要推广-end	-->
</template>

<style scoped lang="scss">
@media screen and (max-width: 1500px) {
	.nav-box {
		font-size: 12px;
	}
	.simple-item {
		width: 48% !important;
	}
}
@media screen and (max-width: 1100px) {
	.nav-box {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;

		div {
			width: 33.33% !important;
			height: 48px !important;
			flex: 0 0 33.3333%;
		}
	}
	.simple-item {
		width: 100% !important;
		font-size: 12px !important;
	}
	.simple-item-top-icon img {
		width: 13px !important;
		height: 13px !important;
	}
}

.product-box {
	margin: 22px;
	padding: 12px 20px;
	background: linear-gradient( 90deg, #F4F4F4 0%, #FFFFFF 100%);
	border-radius: 8px 8px 8px 8px;
}
.simple-item-top {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
.simple-item-top-img {
	width: 58px;
	height: 58px;
}
.simple-item-top-img img {
	width: 100%;
	height: 100%;
	border-radius: 10px 10px 10px 10px;
}

.simple-item-content {
	margin-left: 4px;
}
.simple-item-top-title {
	font-size: 13px;
	color: #000000;
	margin-top: -3px;
}

.simple-item-top-icon {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	margin-top: 3px;
}
.simple-item-top-icon span {
	font-size: 12px;
	color: #000000;
}
.simple-item-top-icon img {
	width: 18px;
	height: 18px;
	margin-left: 4px;
}

.simple-item-top-time {
	font-size: 12px;
	color: #333333;
}

.pt-title {
	margin: 22px 0 0 22px;
	font-size: 14px;
	color: #000000;
}
.pt-title .pt-title-icon {
	width: 8px;
	height: 12px;
}
.pt-content {
	margin: 22px;
	background: #FFFAF8;
	border-radius: 5px 5px 5px 5px;
	padding: 12px 20px;
	font-size: 13px;
	color: #333333;
	line-height: 24px;
}

.popularize-nav {
	width: 90%;
	display: flex;
	color: #333333;
}
.popularize-nav div {
	flex: 1;
	height: 44px;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}
.popularize-nav .nav-active {
	color: #FC661C;
	transition: 0.2s;
}
.popularize-nav .nav-active:before {
	content: '';
	width: 100%;
	height: 4px;
	background: #FC661C;
	border-radius: 5px 5px 0px 0px;
	position: absolute;
	bottom: 0;
	left: 0;
}

.popularize-content .popularize-item {
	margin-top: 22px;
	padding: 0 12px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 13px;
	color: #444444;
}
.popularize-content .popularize-item .popularize-item-left {
	width: 25%;
	text-align: right;
}
.popularize-content .popularize-item .popularize-item-left text {
	margin-right: 12px;
}
.popularize-content .popularize-item .popularize-item-middle {
	width: 50%;
	height: 34px;
	line-height: 34px;
}
.popularize-content .popularize-item .popularize-item-middle .popularize-item-middle-box {
	background: #F2F4F7;
	border-radius: 3px 3px 3px 3px;
	border: 1px solid #ECECEC;
	padding: 0 12px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: #000000;
}
.popularize-content .popularize-item .popularize-item-right {
	width: 25%;
	font-size: 13px;
	color: #FFFFFF;
	text-align: right;
}
.popularize-content .popularize-item .popularize-item-right span {
	background: #FC661C;
	border-radius: 3px 3px 3px 3px;
	padding: 6px 22px;
	cursor: pointer;
}
.popularize-content .popularize-item .popularize-item-middle .popularize-item-qrcode {
	display: flex;
	flex-direction: column;
	margin-top: 12px;
}
.popularize-content .popularize-item .popularize-item-middle .popularize-item-qrcode img {
	max-width: 200px;
	max-height: 200px;
}
.popularize-content .popularize-item .popularize-item-middle .popularize-item-qrcode span {
	margin-top: 12px;
	max-width: 200px;
	height: 34px;
	line-height: 34px;
	text-align: center;
	font-size: 13px;
	color: #FFFFFF;
	background: #FC661C;
	border-radius: 3px 3px 3px 3px;
	cursor: pointer;
}
</style>

<style lang="scss">
@media screen and (max-width: 500px) {
	.el-drawer {
		width: 100% !important;
	}
	.content-simple {
		margin: 0 !important;
	}
}
.el-drawer__header {
	border-bottom: 1px solid #ECECEC;
	padding-bottom: 12px;
	color: #000000;
	margin-bottom: 0;
}
.nav-box {
	width: 100%;
	background: #FFFFFF;
	display: flex;
	color: #000000;

	div {
		flex: 1;
		height: 48px;
		cursor: pointer;
		display: flex;
		justify-content: center;
		align-items: center;

		span {
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
		}
	}

	div:hover {
		color: #FFFFFF;
		background: rgba(252,102,28,0.5);;
	}

	.nav-active {
		color: #FC661C;
		background: rgba(252,102,28,0.12);
		transition: 0.2s;

		span:before {
			content: '';
			width: 100%;
			height: 4px;
			background: #FC661C;
			border-radius: 5px 5px 0px 0px;
			position: absolute;
			bottom: 0;
			left: 0;
		}
	}
}

.content-box {
	width: 100%;
	min-height: 76vh;
	background: #FFFFFF;
	margin-top: 12px;

	.content-simple {
		margin: 0 24px 24px 24px;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		max-width: 100%;

		.simple-item {
			width: 32%;
			margin-left: 1%;
			background: #FFFFFF;
			border-radius: 8px 8px 8px 8px;
			border: 1px solid #ECECEC;
			padding: 12px;
			margin-top: 12px;
			font-size: 13px;

			.simple-item-middle {
				margin-top: 12px;
				display: flex;
				justify-content: space-around;
				align-items: center;
				background: #FFF7F1;
				padding: 8px 10px;

				.text-box-text1 {
					color: #666666;
					text-align: center;
				}

				.text-box-text2 {
					color: #FC661C;
					text-align: center;
				}
			}

			.simple-item-bottom {
				margin-top: 18px;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.simple-item-bottom-1 {
					width: 46%;
					text-align: center;
					font-size: 14px;
					color: #FC661C;
					background: #FFFFFF;
					border-radius: 8px 8px 8px 8px;
					border: 1px solid #FC661C;
					padding: 6px 0;
					cursor: pointer;
				}

				.simple-item-bottom-2 {
					width: 46%;
					text-align: center;
					font-size: 14px;
					color: #FFFFFF;
					background: #FC661C;
					border-radius: 8px 8px 8px 8px;
					padding: 6px 0;
					cursor: pointer;
				}
			}
		}
	}
}
</style>